<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
		<script type="text/javascript " src="jquery/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.caidan {
				width: 1226px;
				height: 100px;
				margin: 0px auto;
			}
			
			.milogo {
				float: left;
				width: 55px;
				margin-top: 22px;
			}
			
			.huodonglogo {
				float: left;
				width: 165px;
				margin-left: 7px;
			}
			
			.caidanleft {
				width: 912px;
				height: 100px;
			}
			
			.caidanzi {
				height: 100px;
			}
			
			.caidanzi .xiaomishouji {
				float: left;
				width: 84px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .hongmi {
				float: left;
				width: 52px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .dianshi {
				float: left;
				width: 52px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .bijiben {
				float: left;
				width: 68px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .kongtiao {
				float: left;
				width: 52px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .xinpin {
				float: left;
				width: 52px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .luyouqi {
				float: left;
				width: 68px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .zhinengyingjian {
				float: left;
				width: 84px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .fuwu {
				float: left;
				width: 52px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi .shequ {
				float: left;
				width: 52px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanright {
				float: right;
				width: 314px;
				height: 65px;
				margin-top: 35px;
			}
			
			.caidanzi a:link {
				text-decoration: none;
			}
			
			.caidanzi a:hover {
				font-weight: bold;
			}
			
			.lunbo {
				height: 460px;
			
				
			}
			/*轮播css*/
			
	 	.lunbo .lunboright{
		
		}
	  
			/*四个小图片css*/
			
			.fourtupian {
				width: 1226px;
				height: 170px;
				margin: 0px auto;
				margin-top: 10px;
			}
			
			.fourtupian .one {
				float: left;
			}
			
			.fourtupian .two {
				float: left;
				margin-left: 14px;
			}
			
			.fourtupian .three {
				float: left;
				margin-left: 14px;
			}
			
			.fourtupian .four {
				float: right;
			}
			/*小米闪购*/
			
			.shangou {
				width: 1226px;
				height: 58px;
				background: black;
				margin: 0px auto;
				margin-top: 26px;
			}
			/*小米秒杀*/
			
			.miaosha {
				width: 1226px;
				height: 340px;
				margin: 0px auto;
			}
			
			.miaosha .one {
				float: left;
			}
			
			.miaosha .two {
				float: left;
				margin-left: 13px;
			}
			
			.miaosha .three {
				float: left;
				margin-left: 13px;
			}
			
			.miaosha .four {
				float: left;
				margin-left: 13px;
			}
			
			.miaosha .five {
				float: right;
			}
			/*小米8现货有售*/
			
			.xianhuo {
				width: 1226px;
				height: 120px;
				margin: 0px auto;
				margin-top: 40px;
				background: black;
			}
			
			ul {
				list-style: none;
			}
			
			
			.lunbo .lunboleft{
				background: rgb(96, 83, 82);
			}
			.lunbo .gundong1:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong1{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong2:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong2{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong3:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong3{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong4:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong4{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong5:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong5{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong6:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong6{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong7:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong7{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong8:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong8{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong9:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong9{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			.lunbo .gundong10:hover{
				background: rgb(255, 103, 0);
			}
			.lunbo .gundong10{
				width: 223px;
				height: 42px;
				line-height: 42px;
			}
			/*手机开始*/
			.shoujibonner{
				width: 1226px;
				height: 58px;
				margin-top: 20px;
				background: black;
			}
			/*手机结束*/
		</style>
	</head>

	<body>
		<div class="container">
			<!--菜单栏开始        -->
			<div class="caidan">
				<div class="caidanright">
					<form class="navbar-form navbar-left">
						<div class="form-group">
							<input class="form-control" placeholder="小米8" type="text">
						</div>
						<button type="submit" class="btn btn-default">一点就爆炸</button>
					</form>
				</div>
				<div class="caidanleft">
					<div class="milogo">
						<img src="img/小米logo.jpg" />
					</div>
					<div class="huodonglogo">
						<img src="img/816.jpg" />
					</div>
					<div class="caidanzi">
						<div class="xiaomishouji">
							<a href="#">小米手机</a>
						</div>
						<div class="hongmi">
							<a href="#">红米</a>
						</div>
						<div class="dianshi">
							<a href="#">电视</a>
						</div>
						<div class="bijiben">
							<a href="#">笔记本</a>
						</div>
						<div class="kongtiao">
							<a href="#">空调</a>
						</div>
						<div class="xinpin">
							<a href="#">新品</a>
						</div>
						<div class="luyouqi">
							<a href="#">路由器</a>
						</div>
						<div class="zhinengyingjian">
							<a href="#">智能硬件</a>
						</div>
						<div class="fuwu">
							<a href="#">服务</a>
						</div>
						<div class="shequ">
							<a href="#">社区</a>
						</div>
					</div>
					<div class="link"></div>
				</div>

			</div>

			<!--菜单栏结束        -->
			<!--轮播图开始        -->
			<div class="container">
				<div class="lunbo">
					<div class="row lunboleft">
						<div class="col-md-2">
							<ul>
								<br />
								<div class="gundong1">
									<li>手机 电话卡</li><br />
								</div>
								<div class="gundong2">
									<li>电视 盒子</li><br />
								</div>
								<div class="gundong3">
								<li>笔记本 平板</li><br />
								</div>
								<div class="gundong4">
								<li>家电 插线板</li><br />
								</div>
								<div class="gundong5">
								<li>出行 穿戴</li><br />
								</div>
								<div class="gundong6">
								<li>智能 路由器</li><br />
								</div>
								<div class="gundong7">
								<li>电源 配件</li><br />
								</div>
								<div class="gundong8">
								<li>个护 儿童</li><br />
								</div>
								<div class="gundong9">
								<li>耳机 音箱</li><br />
								</div>
								<div class="gundong10">
								<li>生活 箱包</li>
								</div>
							</ul>
						</div>
						<div class="col-md-10">
							<img src="img/轮播图.jpg" />
						</div>
						<div class="link"></div>
					</div>

				</div>
			</div>
			<!--轮播图结束        -->
			<!--四个小图片开始        -->
			<div class="fourtupian">
				<div class="one">
					<img src="img/one.jpg" />
				</div>
				<div class="two">
					<img src="img/two.jpg" />
				</div>
				<div class="three">
					<img src="img/three.jpg" />
				</div>
				<div class="four">
					<img src="img/four.jpg" />
				</div>

			</div>
			<!--四个小图片结束   -->
			<!--小米闪购开始  -->
			<div class="shangou">
				<img src="img/小米闪购.jpg" />
			</div>
			<!--小米闪购结束   -->
			<!--小米秒杀开始   -->
			<div class="miaosha">
				<div class="one">
					<img src="img/闪购1.jpg" />
				</div>
				<div class="two">
					<img src="img/闪购2.jpg" />
				</div>
				<div class="three">
					<img src="img/闪购3.jpg" />
				</div>
				<div class="four">
					<img src="img/闪购4.jpg" />
				</div>
				<div class="five">
					<img src="img/闪购5.jpg" />
				</div>
			</div>
			<!--小米秒杀结束   -->
			<!--小米8现货开始   -->
			<div class="xianhuo">
				<img src="img/小米8现货有售.jpg" />
			</div>
			<!--小米8现货结束   -->
			<!--手机开始-->
			<div class="container" style="background: rgb(245, 245, 245);">
				<div class="shoujibonner">
					
				</div>
				
			</div>
			<!--手机结束   -->

		</div>

	</body>

</html>    